@{
    ViewBag.Title = "CSS3剪贴路径（Clip-path）在线生成器";
    ViewBag.keywords = "图形生成器,css图形生成器,CSS3 剪贴路径（Clip-path）在线生成器";
    ViewBag.description = "CSS3 剪贴路径（Clip-path）在线生成器";
    var host = Appsettings.app("BaseFile:HostUrl");
    var imageUrl = Appsettings.app("BaseFile:ImageUrl");
}
@section Styles{
<link rel="stylesheet prefetch" href="@host/lib/clip/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="@host/lib/clip/css/mod_css-clip-path.min.css">
<style>
.fade-content{margin:5px 0px;}.clippath{width:100%;margin:0 auto;font-size:15px;width:100%;margin-bottom:10px;border:1px dashed whitesmoke;background:url() repeat;background-color:#F2F2F2;text-align:left;}.clippath h2{font-size:22px;margin-bottom:10px;}a.browser_item{width:30%;margin:0 5% 2.5% 0;display:inline-block;height:24px;line-height:24px;padding-left:29px;background-repeat:no-repeat;background-position:left center;background-size:contain;font-size:12px;font-weight:normal;color:#5c5c5c;display:inline-block;}</style>
}
<div class="clippath text-left" id="CLIPPATH">
    <h2 class="arrow">CSS3 剪贴路径（Clip-path）在线生成器</h2>
    <div id="GENERATOR_DIV">
        <div id="EFFECTION_DIV">
            <div class="demo">
                <div id="box" class="box">
                    <div class="shadowboard"></div>
                    <div class="clipboard"style="-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
                    <div class="handles">
                        <div class="handle" data-handle="0" style="top: 0px; left: 185px;">
                            <div class="delete-point"></div>
                        </div>
                        <div class="handle" data-handle="1" style="top: 370px; left: 0px;">
                            <div class="delete-point"></div>
                        </div>
                        <div class="handle" data-handle="2" style="top: 370px; left: 370px;">
                            <div class="delete-point"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="options">
                <div class="grid panel fade-content">
                    <h2 style="font-size:18px;">显示路径外图像</h2>
                    <input type="checkbox" id="shadowboard-toggle" name="prefix">
                    <label for="shadowboard-toggle" style="min-width:80px;height:30px;line-height:30px;border-radius: 5px;"></label>
                </div>
                <div class="grid panel flex fade-content">
                    <h2 style="font-size:18px;">CSS前缀</h2>
                    <input type="checkbox" checked="checked" id="webkit" value="5" name="prefix">
                    <label for="webkit" style="min-width:80px;height:30px;line-height:30px;">webkit</label>
                </div>
            </div>

            <div tabindex="-1" class="shapes vertical">
                <ul></ul>
            </div>
            <div class="options">
                <div class="grid panel fade-content">
                    <h2>演示背景图片</h2>
                    <div class="backgrounds">
                        <img src="@host/lib/clip/img/pittsburgh.jpg">
                        <img src="@host/lib/clip/img/fierenze.jpg">
                        <img src="@host/lib/clip/img/sparkler.jpg">
                        <img src="@host/lib/clip/img/miami.jpg">
                    </div>
                    <input type="url" name="background" id="custom_url" placeholder="请输入您图片的URL">
                    <style id="custom_background">
                        .shadowboard,
                        .clipboard {
                            background-image: url(@host/lib/clip/img/pittsburgh.jpg);
                        }
                    </style>
                    <br>
                </div>
            </div>
            <div class="css-code code fade-content" style="margin:5px 0;"><code class="webkit block show">-webkit-clip-path:<span class="functions">polygon(<code class="point" data-point="0">50% 0%</code>,<code class="point" data-point="1">0% 100%</code>,<code class="point" data-point="2">100% 100%</code>)</span>;</code> <code class="unprefixed block show">clip-path:<span class="functions"> polygon(<code class="point" data-point="0">50% 0%</code>,<code class="point" data-point="1">0% 100%</code>,<code class="point" data-point="2"> 100% 100%</code>)</span>;</code></div>

            <div class="grid panel fade-content">
                <h2 style="font-size:18px;">浏览器兼容性支持</h2>
                <p>
                    <a href="javascript:void(0)" class="browser_item chrome">Chrome 24+</a>
                    <a href="javascript:void(0)" class="browser_item safari">Safari 8+</a>
                    <a href="javascript:void(0)" class="browser_item opera">Opera 15+</a>
                    <a href="javascript:void(0)" class="browser_item firefox">不支持Firefox</a>
                    <a href="javascript:void(0)" class="browser_item ie9_10">不支持IE</a>
                </p>
            </div>
        </div>
    </div>
</div>
@section Scripts{
<script type="text/javascript" src="@host/lib/clip/js/jquery.min.js"></script>
<script src="@host/lib/clip/js/flickity.pkgd.min.js"></script>
<script src="@host/lib/clip/js/draggabilly.min.js"></script>
<script src="@host/lib/clip/js/clip.js"></script>
<script>

</script>
}